<template>
  <div>
    <Titlehead uname="订单趋势" />
    <div>
      <div id="orderpaicharts5"></div>
    </div>
  </div>
</template>

<script>
import Titlehead from "../firstTitle";
import * as echarts from "echarts";

export default {
  data() {
    return {
      timer: null,
      chart: null,
      option: null,
      count: 0,

      colorlist: ["#DF3AB9", "#18C79C", "#8555F9", "#F09228", "#F90228"],
      pieData: [35, 22, 41, 33, 28, 46, 30],
      xjcs: [15, 42, 21, 23, 18, 26, 40],
      myData1: [
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
        "星期天",
      ],
    };
  },
  components: {
    Titlehead,
  },

  mounted() {
    this.initcharts();
  },

  methods: {
    initcharts() {
      this.chart = echarts.init(document.getElementById("orderpaicharts5"));
      let that = this;
      that.option = {
        //你的代码
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          textStyle: {
            color: "#fff",
            fontSize: 12,
          },
          confine: true, // 超出范围
          backgroundColor: "rgba(17,95,182,0.5)", //设置背景颜色
          //   borderColor: "rgba(255, 255, 255, .8)",
          formatter: "{b}<br>{a}：{c}/次<br>{a1}：{c1}/km",
        },
        legend: {
          top: "4%",
          right: "14%",
          itemWidth: 18,
          itemHeight: 10,
          itemGap: 30,
          textStyle: {
            fontSize: 12,
            color: "#fff",
            padding: [0, 0, 0, 10],
          },
        },
        grid: {
          top: "18%",
          left: "4%",
          right: "0%",
          bottom: "0%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: that.myData1,
            axisTick: {
              show: false,
              alignWithLabel: true,
            },
            axisLine: {
              lineStyle: {
                color: "#1C82C5",
              },
            },
            axisLabel: {
              interval: 0,
              margin: 10,
              color: "#05D5FF",
              textStyle: {
                fontSize: 14,
                color: "#fff",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "/次",
            splitNumber: 5,
            nameTextStyle: {
              color: "#fff",
              fontSize: 12,
              align: "center",
              padding: [0, 28, 0, 0],
            },
            axisLabel: {
              formatter: "{value}",
              color: "rgba(95, 187, 235, 1)",
              textStyle: {
                fontSize: 14,
                color: "#fff",
                lineHeight: 16,
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(28, 130, 197, .3)",
                type: "dashed",
              },
            },
          },
          {
            splitNumber: 5,
            type: "value",
         
            axisLabel: {
              show: false,
              fontSize: 12,
              color: "#fff",
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "充电次数",
            type: "bar",
            barWidth: "12",
            data: that.xjcs,
            itemStyle: {
              normal: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(9, 63, 109, 1)",
                    },
                    {
                      offset: 1,
                      color: "rgba(1, 166, 252, 1)",
                    },
                  ],
                },
                borderColor: "#3681FF",
              },
              // borderRadius: [2, 2, 0, 0],
            },
          },
          {
             name: "订单数",
             type: "line",
             yAxisIndex: 1, // 与第二个 y 轴关联
             showSymbol: true,
             symbolSize: 8,
             lineStyle: {
                normal: {
                   color: "#02D3EA",
                },
             },
             itemStyle: {
                color: "#02D3EA",
                borderColor: "#02D3EA",
                borderWidth: 2,
             },
             label: {
                show: true,
                position: "top",
                textStyle: {
                   fontSize: 14,
                   color: "#91CDFE",
                },
             },
             data: that.pieData, // 折线图的数据
          },
        ],
      };
      that.chart.setOption(that.option);
    },
  },
};
</script>

<style lang="scss" scoped>
#orderpaicharts5 {
  height:250px;
  width: 450px;
}
</style> 